<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style type="text/css">
		.searchResultContent > div{
			display: none;
			max-width: 800px;
		}
		.searchResultTab > a{
			display: inline-block;
			height: 60px;
			width: 120px;
			border: 1px solid;
		}
		.searchResultContentP > div{
			display: none;
			max-width: 800px;
		}
		.searchResultTabP > a{
			display: inline-block;
			height: 60px;
			width: 120px;
			border: 1px solid;
		}
		.active{
			background-color: green;
			color: white;
			font-stretch: wider;
		}
		iframe{
			width: 800px;
			height: 800px;
		}
		.boxes{font-size:14px;font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;}

		</style>
	</head>
	<body>
		<div>
			<div style="float:left">
				<span>图片总共</span><span id="totalCount"></span>
				<span style="color:green">已处理</span><span id="isMarkCount" style="color:green"></span>
				<span style="color:red">未处理</span><span id="noMarkCount" style="color:red"></span>
			</div>
			<center>
				<div>
					<div id="img_ocrDiv"></div>
					<div id="img_nameDiv"></div>
					<input type="text" id="img_name" hidden />
					<br>
				</div>
			</center>
			<center>
			<br>
			<!--
			<input type="file" id="uploadImageFile"></input>
			<img id="preImg" src="" width="600" height="200"/>
			-->
				<div id="is_successDiv" hidden><input type="checkbox" id="is_success" ><font color="red">搜索成功</font>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button id="markSubmit" style="background-color: Beige">提交标记</button><label id="markSubmitMsg"><font color="red"></font></label>
				</div>
				<br>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<button id="start" style="background-color: Gold">点击开始下一张测试图片</button>
				<br>
				<br>
				<button id="youdaoButton">有道搜索</button>
				<br>
				<div id="youdaoResultDiv" style='width: 600px;display:block;word-break: break-all;word-wrap: break-word;text-align: left;'></div>
			</center>
			<script>
			$(function(){
				//var baseUrl = "http://localhost:27000/ocrmark";
				var baseUrl = "http://192.168.1.75:27000/ocrmark";


				$('#start').click(function(){
					$.ajax({
						type: 'POST',
						dataType: 'json',
						url: baseUrl + "/resource/questionSearch/getOneImgYoudao",
						timeout: 120000,
						error: function(){
							alert("网络错误")
						},
						success: function(data){
							if(data.status == '1'){
								var name = data.value.img.name;
								var imgBase64 = data.value.img.imgBase64;
								$('#img_name').val(name);
								$('#img_nameDiv').html(name)
								$('#img_ocrDiv').html(imgBase64);
								$("#markSubmitMsg").html('');
								$('#searchResultDiv').html('');
								$('#youdaoResultDiv').html('');
								$('#start').hide();
								$('#is_successDiv').hide();
								$('#is_success').removeAttr("checked")
								$("#totalCount").html(data.value.deal.totalCount);
								$("#isMarkCount").html(data.value.deal.isMarkCount);
								$("#noMarkCount").html(data.value.deal.noMarkCount);

							}else{
								alert(data.msg);
							}
						}

					});
				});


				$('#youdaoButton').click(function(){
					youdao();
				});

				$('#markSubmit').click(function(){
					var flag = $('#is_success').is(':checked');
					var is_success = "0";
					if(flag == true){
						is_success = "1";
					}
					var img_name = $('#img_name').val();

					var param = {img_name:img_name,is_success:is_success};
					$.ajax({
						type: "post",
						url: baseUrl + "/resource/questionSearch/updateMarkYoudao",
						dataType : "json",
						contentType : "application/json",
						data: ''+JSON.stringify(param),
						success: function (result) {
							if(result.status == '1'){
								$("#markSubmitMsg").html('<font color="green">[提交成功]</font>');
							}else{
								$("#markSubmitMsg").html('<font color="red">'+result.msg+'</font>');
							}
						}
					});
					$('#start').show();

				});
				
				
			   $("#uploadImageFile").change(function () {
					var $file = $(this);
					var fileObj = $file[0];
					var windowURL = window.URL || window.webkitURL;
					var dataURL;
					var $img = $("#preImg");

					if (fileObj && fileObj.files && fileObj.files[0]) {
						dataURL = windowURL.createObjectURL(fileObj.files[0]);
						$img.attr('src', dataURL);
					} else {
						dataURL = $file.val();
						var imgObj = document.getElementById("preImg");
						// 两个坑:
						// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性在加入，无效；
						// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
						imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
						imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;

					}
				});
				
				
				
				function youdao() {
					var img_name = $('#img_name').val();
					$.ajax({
						processData: false,
						contentType: false,
						cache: false,
						type: 'POST',
				        dataType: 'json',
				        url: baseUrl + "/resource/questionSearch/youdaoQuestionByName?name="+img_name,
				        data: "",
						async: true,
						timeout: 120000,
						error: function(){
							alert("网络错误")
						},
				        success: function(data){
				        	if(data.status == '1'){
				        		var ocrRs = data.value.ocrRs;
								var html = '';
								var cont = '';
				        		if(ocrRs.errorCode == '0'){
									var questions = ocrRs.data.questions;
									html += "<hr><font color='green'>OCR结果：</font><br>";
									html += ocrRs.data.text + "<br>";
									html += "<hr><font color='red'>题目结果：</font><br><hr>";
									for(var i=0; i<questions.length; i++){
										//alert(questions[i].content);
										//html += '<iframe id="youdaoqs"></iframe>'
										html +=  questions[i].content + '<br><br><hr>';

									}
								}else{
									html += '<hr><font color="green">OCR结果：</font><br>';
									html += ocrRs.data.text + '<br>';
									html += '<hr><font color="red">题目结果：</font><br><hr>';
									html += '<hr><font color="red">无结果：</font><br><hr>';
								}
								//alert(html);
								//$('#youdaoResultDiv').html(html);
								document.getElementById("youdaoResultDiv").innerHTML = html;
								$('#is_successDiv').show();
								MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
				        	}
				        	else{
				        		alert(data.msg);
				        	}
				        }
					})
				}
			});
			</script>
		</div>
		
		<script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.7.6/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
	</body>
</html>
